<template>
	<a-modal v-model:visible="visable" :title="title" :mask-closable="false" :width="600" @before-ok="doSubmit()"
		@cancel="close">
		<a-form ref="appForm" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }" layout="vertical">
			<a-row :gutter="8">
				<a-col :span="12">
					<a-form-item label="广告名称" label-position="top" field="title">
						<a-input v-model="formData.title" placeholder="请输入广告名称" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="展示位置" label-position="top" field="positionId">
						<a-select v-model="formData.positionId" @change="setOption">
							<a-option value="">请选择投放位置</a-option>
							<a-option :value="item.id" v-for="(item, index) in location" :key="index">{{ item.name
							}}</a-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="8">
				<a-col :span="24">
					<!-- <up-img :thumb="formData.src" @success="upimgSuccess"></up-img> -->
					<cropperUp :thumb="formData.src" :option-width="ow" :option-heigth="oh" @success="upimgSuccess">
					</cropperUp>
				</a-col>
			</a-row>
			<a-row :gutter="8">
				<a-col :span="12">
					<a-form-item label="跳转链接" label-position="top" field="link">
						<a-input v-model="formData.link" placeholder="/goods/detail?id=2" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="视频跳转链接" label-position="top" field="link">
						<a-input v-model="formData.videoSrc" placeholder="播放视频地址" />
					</a-form-item>
				</a-col>
				<a-col :span="9">
					<a-form-item label="是否启用" label-position="top" field="status">
						<a-radio-group button-style="solid" v-model="formData.status" :false-value="0" :true-value="1">
							<a-radio :value="1">启用</a-radio>
							<a-radio :value="0">禁用</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<!-- <a-spin size="large" fix v-if="loading" /> -->
	</a-modal>
</template>

<script lang="ts">
import { onBeforeMount, ref, watch } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';
import cropperUp from '@/components/cropper/cropperUp.vue';
export default {
	components: { cropperUp },
	props: ['location'],
	setup(props, { emit }) {
		const visable = ref(false);
		const loading = ref(false);
		const title = ref();
		const ow = ref();
		const oh = ref();
		const appForm = ref();
		// const { location } = props;
		const location = ref(props.location);
		console.log(location)
		const formData = ref({
			id: ref(''),
			title: ref(''),
			link: ref(''),
			src: ref(''),
			videoSrc: ref(''),
			status: ref(1),
			sort: ref(0),
			positionId: ref('')
		});
		const formRule = ref({
			positionId: [{ required: true, type: 'number', min: 0, message: '请选择投放位置' }],
			title: [{ required: true, message: '请输入广告名称' }],
			src: [{ required: true, message: '请上传广告图片' }]
		} as any);
		const show = (form: any) => {
			visable.value = true;
			if (!form) {
				formData.value.id = '';
				formData.value.src = '';
				title.value = '添加';
			} else {
				formData.value = JSON.parse(JSON.stringify(form));
				title.value = '修改';
				setOption(formData.value.positionId)
			}
		};
		const close = () => {
			visable.value = false;
			appForm.value.resetFields();
			emit('close');
		};
		watch(() => props.location, (newVal: any) => {
			location.value = newVal
		})
		const doSubmit = () => {
			return new Promise((resolve, reject) => {
				appForm.value.validate((valid: any) => {
					if (valid) {
						resolve(false); return;
					}
					utils.loading();
					request
						.post('/platform/advertising/save', formData.value)
						.then((ret: any) => {
							if (ret.code == 200) {
								resolve(true);
								utils.success('操作成功！').then(() => {
									appForm.value.resetFields();
									visable.value = false;
									emit('success');
								});
							}
						})
						.catch(err => {
							resolve(false)
						});
				});
			})
		}
		const setOption = (id: any) => {
			location.value.map((r: any) => {
				if (r.id == id) {
					ow.value = r.width;
					oh.value = r.height;
					if (utils.isEmpty(r.width) || utils.isEmpty(r.height)) {
						utils.error('广告位置的宽度或高度设置错误');
						return;
					}
				}
			});
		};
		const upimgSuccess = (res: any) => {
			formData.value.src = res;
		}
		return { visable, appForm, formData, location, title, formRule, ow, oh, show, close, doSubmit, setOption, upimgSuccess };
	}
};
</script>

<style scoped>
.demo-drawer-footer {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>
